<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" type="text/css" href="__static__/css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="__module__/layui/css/layui.css" />
</head>
<body>

 <div id="uploader-demo" style="margin-top: 17px;margin-left:100px;">
     <!--用来存放item-->
         <div  id="fileList" class="uploader-list">
         </div>
         <div id="filePicker">选择文件</div>

 </div>
 </body>
    <script type="text/javascript" src="__static__/js/jquery.js"></script>
    <script type="text/javascript" src="__static__/js/xadmin.js"></script>
    <script type="text/javascript" src="__module__/layui/layui.all.js"></script>
    <script type="text/javascript" src="__module__/layer/layer.js"></script>
    <script type="text/javascript" src="__static__/js/webuploader.js"></script>
    <script type="text/javascript">
            var $list=$("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼
            var thumbnailWidth = 400;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
            var thumbnailHeight = 400;
            var uploader = WebUploader.create({
             // 选完文件后，是否自动上传。
            auto: true,
             // swf文件路径
            swf: '__static__/css/Uploader.swf', //加载swf文件，路径一定要对

             // 文件接收服务端。
             server: '{:url("admin/file_system/upload")}',

             // 选择文件的按钮。可选。
             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
             pick: {
                "id":"#filePicker",
                "multiple":true,
             },
             // 单个文件大小限制
             
             fileSingleSizeLimit:2*1024*1024,
             accept: {
                 title: 'file',
                 extensions: 'gif,jpg,jpeg,bmp,png,doc,docx,md,xmind,txt,pdf,zip,rar',
                 
             }
         });
            
            //上传验证
            uploader.on("error", function (type) {
            if (type == "Q_TYPE_DENIED") {
            layer.msg("不要上传非法格式文件！",{time:2000});
            }else if (type == "F_EXCEED_SIZE") {
            layer.msg("文件大小不能超过2M");
            }else {
            layer.msg("上传出错！请检查后重新上传！错误代码"+type);
            }
            });
         //上传完成事件监听
         uploader.on( 'fileQueued', function(file) {
            var $li = $(
                     '<div id="' + file.id + '" class="file-item thumbnail">' +
                         '<img>' +
                         '<div class="info">' + file.name + '</div>' +
                     '</div>'
                     ),
                 $img = $li.find('img');
             // $list为容器jQuery实例
                    $list.append( $li );
             // 创建缩略图
             // 如果为非图片文件，可以不用调用此方法。
             // thumbnailWidth x thumbnailHeight 为 100 x 100
             uploader.makeThumb( file, function( error, src ) {
                 if ( error ) {
                     $img.replaceWith('<span>非图片不能预览</span>');
                     return;
                 }
                 // $img.attr( 'src', src );
             }, thumbnailWidth, thumbnailHeight );
             //提示
             layer.msg('上传文件成功 √ ',{time:2000},function(){
                x_admin_close();
                parent.location.reload();
             });
         });

 </script>
</body>
</html>